<template>
  <div class="app-main">
    <router-view v-slot="{ Component }">
      <keep-alive :include="includeList">
        <component :is="Component"/>
      </keep-alive>
    </router-view>
  </div>
</template>
<script setup>
import { ref, watch } from 'vue'
import { useRoute } from 'vue-router'

const includeList = ref([])
const route = useRoute()

watch(
  () => route,
  (newVal) => {
    if (newVal.meta.keepAlive && includeList.value.indexOf(newVal.name) === -1) {
      includeList.value.push(newVal.name)
    }
  },
  { deep: true, immediate: true }
)

</script>
